<template>
    <div class="con drp-info">
        <div class="warp">
            <div class="header">
                <div class="header-top">
                    <div class="header-img">
                        <img :src="affiliate_info.avatar" alt="" class="img" v-if="affiliate_info.avatar">
                        <img src="../../../assets/img/user_default.png" alt="" class="img" v-else>
                    </div>
                    <div class="header-right">
                        <h4>{{ affiliate_info.name }}</h4>
                        <div class="hang">
                            <div class="vip" v-if="affiliate_info.user_rank_name">
                                <span>{{ affiliate_info.user_rank_name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="affiliate-items">
            <div class="section section-money">
                <div class="tit">
                    <div>{{$t('lang.my_money')}}</div>
                </div>
                <div class="value">
                    <div class="item">
                        <p>{{ channel_info.channel_income }}</p>
                        <span>{{$t('lang.channel_income')}}</span>
                    </div>
                    <div class="item">
                        <p>{{ channel_info.channel_num }}</p>
                        <span>{{$t('lang.total_money')}}</span>
                    </div>
                    <!-- <div class="item">
                        <p>{{ channel_info.user_today_affiliate_money }}</p>
                        <span>{{$t('lang.total_nums')}}</span>
                    </div> -->
                </div>
            </div>
        </div>
        <!-- table  -->
       <van-row class="title" >
            <van-col span="8">昵称</van-col>
            <van-col span="8">商品</van-col>
            <van-col span="8">收益</van-col>
        </van-row>
        <hr/>
        <div class="body">
            <van-row class="tc" v-for="(x,i) in list" :key="i" >
                <van-col span="8">{{ x.user_name }}</van-col>
                <van-col span="8">{{ x.goods_name }}</van-col>
                <van-col span="8">{{ x.money }}元</van-col>
            </van-row>
            
        </div>
    </div>    
</template>
<script>
import qs from 'qs';
export default{
    data(){
        return{
            affiliate_info:'',
            list: [],
            loading: false,
            finished: true,
            channel_info:{}
        }
    },
    created(){
        this.$http.post(`${window.ROOT_URL}api/v4/user/affiliate_info`).then(res=>{
            this.affiliate_info = res.data.data;
        })
        this.$http.post(`${window.ROOT_URL}api/v4/user/channel/history`).then(res=>{
            console.log(res);
            this.list = res.data.data.list;
            this.channel_info = res.data.data.info;
        })
    },
    methods: {
        inviteFriends(){
            this.$router.push({
                name:'affiliate'
            })
        },
        protectionHref(index){
            this.$router.push({
                name:'affiliateProtection',
                query:{
                    rank_id:this.affiliate_info.user_rank,
                    index:index
                }
            })
        },
        onLoad(){
       
        }
    }
}
</script>
<style>
.affiliate-items{
    margin: -6rem 1.1rem 0;
    background-color: #ffffff;
    box-shadow: 0 0.5rem 1rem 0 rgba(95, 95, 95, 0.1);
    border-radius: 0.5rem;
}
.warp .header{
    background-image: url(../../../assets/img/newuser/info-bg2.png);
}
.tc{
    text-align: center;
    height: 20px;
}
hr{
    width: 100%;
    border-top: solid 1px #ccc;
    padding-bottom: 10px;
    background: #fff;
}
.title{
    text-align: center;
    padding: 10px 0;
     background: #fff;
}
.body{
    background: #fff;
}
</style>